<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
    <title>资质审查</title>
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="./css/step2.css">
    <link rel="stylesheet" href="./element/index.css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="backBtn">
            <el-button size="small" @click="onClickLeft">
                <i class="el-icon-arrow-left"></i>
                返回</el-button>
        </div>
        <el-tabs v-model="active" type="border-card">
            <el-tab-pane label="第一步：资质审核" name="1">
                <div class="iframeBox">
                    <iframe src="./infoList.html" frameborder="0" style="width: 100%;height: 100%;"></iframe>
                </div>
            </el-tab-pane>
            <el-tab-pane label="第二步：价格对比" name="2">
                <el-button @click="onRefresh" icon="el-icon-refresh" size="small" class="btnCl">刷新</el-button>
                <el-table :data="proList" style="width: 100%" border style="width: 100%;"
                    :header-cell-style="{ background: '#409EFF', color: '#FFF' }" @selection-change="selectTiPro">
                    <el-table-column prop="qualProductName" label="产品"></el-table-column>
                    <el-table-column label="供货价" width="200">
                        <template slot-scope="scope">
                            <el-input placeholder="请输入供货价" v-model="scope.row.supplyPrice" size="small"
                                :readonly="!scope.row.isFirst">
                                <el-button slot="append" @click="savePrice(scope.row)"
                                    v-if="scope.row.isFirst">提交</el-button>
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="京东最低价" width="150">
                        <template slot-scope="scope">
                            {{scope.row.bottomJd}}
                            <template v-if="scope.row.bottomJd">
                                <el-tag v-if="scope.row.JDPercent<0" size="small" type="danger"><i
                                        class="el-icon-top"></i>
                                    {{Math.abs(scope.row.JDPercent).toFixed(2)}}%</el-tag>
                                <el-tag v-if="scope.row.JDPercent==0" size="small"><i class="el-icon-minus"></i>
                                    {{Math.abs(scope.row.JDPercent).toFixed(2)}}%</el-tag>
                                <el-tag v-if="scope.row.JDPercent>0" size="small" type="success"><i
                                        class="el-icon-bottom"></i>
                                    {{Math.abs(scope.row.JDPercent).toFixed(2)}}%</el-tag>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column label="拼多多最低价" width="150">
                        <template slot-scope="scope">
                            {{scope.row.bottomPdd}}
                            <template v-if="scope.row.bottomPdd">
                                <el-tag v-if="scope.row.PDDPercent<0" size="small" type="danger"><i
                                        class="el-icon-top"></i>
                                    {{Math.abs(scope.row.PDDPercent).toFixed(2)}}%</el-tag>
                                <el-tag v-if="scope.row.PDDPercent==0" size="small"><i class="el-icon-minus"></i>
                                    {{Math.abs(scope.row.PDDPercent).toFixed(2)}}%</el-tag>
                                <el-tag v-if="scope.row.PDDPercent>0" size="small" type="success"><i
                                        class="el-icon-bottom"></i>
                                    {{Math.abs(scope.row.PDDPercent).toFixed(2)}}%</el-tag>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column label="淘宝最低价" width="150">
                        <template slot-scope="scope">
                            {{scope.row.bottomPrice}}
                            <template v-if="scope.row.bottomPrice">
                                <el-tag v-if="scope.row.TBPercent<0" size="small" type="danger"><i
                                        class="el-icon-top"></i>
                                    {{Math.abs(scope.row.TBPercent).toFixed(2)}}%</el-tag>
                                <el-tag v-if="scope.row.TBPercent==0" size="small"><i class="el-icon-minus"></i>
                                    {{Math.abs(scope.row.TBPercent).toFixed(2)}}%</el-tag>
                                <el-tag v-if="scope.row.TBPercent>0" size="small" type="success"><i
                                        class="el-icon-bottom"></i>
                                    {{Math.abs(scope.row.TBPercent).toFixed(2)}}%</el-tag>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column label="意见">
                        <template slot-scope="scope">
                            <template v-if="scope.row.supplyPrice != '' && scope.row.lowPrice != 0">
                                提示：<span :class="scope.row.isCooperate?'':'redText'">
                                    <template v-if="scope.row.isCooperate">
                                        低于全网最低价{{Math.abs(scope.row.LowPercent).toFixed(2)}}%，可以合作
                                    </template>
                                    <template v-else>
                                        供货价高于全网最低价{{Math.abs(scope.row.LowPercent).toFixed(2)}}%，不合作
                                    </template>
                                </span>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column label="价格修改审核状态" width="250">
                        <template slot-scope="scope">
                            <template
                                v-if="scope.row.supplyPrice && scope.row.newPrice!=null&&scope.row.newPrice!=scope.row.supplyPrice">
                                <el-tag type="primary" v-if="scope.row.note==1" size="small">审核中</el-tag>
                                <el-tag type="success" v-else-if="scope.row.note==0" size="small">审核通过</el-tag>
                                <el-tag type="danger" v-else-if="scope.row.note==2" size="small">审核驳回</el-tag>
                                <span>申请修改的价格为：{{scope.row.newPrice}}</span>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="140">
                        <template slot-scope="scope">
                            <el-button size="small" @click="editHandle(scope.row)"
                                v-if="!scope.row.isFirst">申请修改价格</el-button>
                        </template>
                    </el-table-column>
                </el-table></el-tab-pane>
            <el-tab-pane label="第三步：产品体验" name="3">
                <el-button @click="saveHandle" size="small" class="btnCl">体验产品</el-button>
                <el-button @click="onRefresh" icon="el-icon-refresh" size="small" class="btnCl">刷新</el-button>
                <el-table :data="tiProList" style="width: 100%" border style="width: 100%;"
                    :header-cell-style="{ background: '#409EFF', color: '#FFF' }" @selection-change="selectTiPro">
                    <el-table-column type="selection" width="55" :selectable="checkSelectable">
                    </el-table-column>
                    <el-table-column prop="qualProductName" label="产品"></el-table-column>
                    <el-table-column label="体验方式">
                        <template slot-scope="scope">
                            {{scope.row.transmitMode==1?'物流':scope.row.transmitMode==0?'送到公司':''}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="courierNumber" label="备注"></el-table-column>
                    <el-table-column prop="appraise" label="评价"></el-table-column>
                </el-table></el-tab-pane>
            <el-tab-pane label="第四步：验厂" name="4">
                <el-button @click="onRefresh" icon="el-icon-refresh" size="small" class="btnCl">刷新</el-button>
                <el-table :data="comList" style="width: 100%" border style="width: 100%;"
                    :header-cell-style="{ background: '#409EFF', color: '#FFF' }">
                    <el-table-column prop="companyName" label="企业"></el-table-column>
                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.state==1" type="success">验证通过</el-tag>
                            <el-tag v-else-if="scope.row.state==2" type="danger">未验证通过</el-tag>
                            <el-tag v-else>待验厂</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="suggestion" label="审核意见"></el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <!-- 体验方式弹窗 -->
        <el-dialog title="体验产品方式" :visible.sync="showTiyan" width="30%" :before-close="tiClose">
            <el-form :model="tiYanForm" :rules="tiyanFormRule" ref="tiyanForm" label-width="100px"
                class="demo-ruleForm">
                <el-form-item label="体验方式" prop="type">
                    <el-radio-group v-model="tiYanForm.type">
                        <el-radio label="0">送到公司</el-radio>
                        <el-radio label="1"> 物流</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="tiYanForm.type==1?'物流单号':'备注'">
                    <el-input v-model="tiYanForm.note" placeholder="请输入"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="tiClose">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </span>
        </el-dialog>


        <!-- 修改产品价格申请弹窗 -->
        <el-dialog title="修改价格" :visible.sync="showPrice" width="30%" :before-close="priceClose">
            <el-form :model="priceForm" :rules="priceFormRule" ref="priceForm" label-width="100px"
                class="demo-ruleForm">
                <el-form-item label="产品价格" prop="newPrice">
                    <el-input type="number" v-model="priceForm.newPrice" placeholder="请输入产品价格"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="priceClose">取 消</el-button>
                <el-button type="primary" @click="submitProPrice">确 定</el-button>
            </span>
        </el-dialog>



        <div class="mask" v-if="mask">
            <img src="../../img/load.gif">
        </div>
    </div>

    <script src="../../js/vue.min.js"></script>
    <script src="../../js/flex_ible/lib-flexible.js"></script>
    <script src="../../js/vue-lazyload.js"></script>
    <script src="../../js/vant.min.js"></script>
    <script src="./element/element.js"></script>
    <script src="../../js/vue-lazyload.js"></script>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/ajax.js"></script>
    <script src="../js/url.js" type="text/javascript" charset="utf-8"></script>
    <script>



        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }


        var userId = GetQueryString("userId");
        var recordId = GetQueryString("recordId");
        // alert(userId)
        // alert(recordId)



        Vue.use(VueLazyload);
        var vm = new Vue({
            el: "#app",
            data: {
                mask: false,
                active: '1',// 步骤条
                list: [],

                showType: false,// 产品类型弹窗
                actions: [],
                proList: [],

                supplyPrice: '',// 价格
                bottomPrice: '',// 全网最低价
                isCooperate: true,// 是否具备合作意向

                selectIndex1: '', // 选择产品类型  企业索引
                selectIndex2: '',// 选择产品类型   类型索引

                typeId: 0,// 上传图片时 所在分类和id
                ziZhiId: 0,// 上传图片时 所对应资质的id


                recordId: '',// 主信息

                tiProList: [],// 可进行体验的产品列表
                checkAll: false,// 勾选全部体验产品
                showTiyan: false,// 展示体验方式弹窗

                tiYanForm: {  // 产品体验 信息表单
                    type: '',
                    note: '',
                    ids: ''
                },
                tiyanFormRule: {
                    recordName: [
                        { required: true, message: '请输入记录标题', trigger: 'blur' },
                    ],
                },

                comList: [],//  公司列表

                showPrice: false,// 显示修改价格弹窗

                editPro: '',//当前要修改价格的产品信息
                newPrice: '',
                isLoading: false,
                selectTiProIds: '',// 选中的产品列表
                priceForm: {
                    newPrice: '',
                },
                priceFormRule: {
                    newPrice: [
                        { required: true, message: '请输入产品价格', trigger: 'blur' },
                    ],
                },


            },
            created() {

                if (recordId != null) {
                    this.recordId = recordId
                    localStorage.recordId = recordId
                    localStorage.recordUserId = userId
                } else if (localStorage.recordId) {
                    this.recordId = localStorage.recordId
                    console.log(this.recordId);
                }

                this.getComList()
                this.getProductList()


            },
            methods: {
                handleClick() {
                    console.log(this.active);

                },
                // 关闭价格弹窗
                priceClose() {
                    this.showPrice = false
                },
                checkSelectable(row, index) {
                    let flag = row.transmitMode ? false : true
                    console.log(row);
                    return flag
                },

                // 体验产品 关闭弹窗
                tiClose() {
                    this.tiClose = false
                },
                selectTiPro(arr) {
                    console.log(arr);
                    this.selectTiProIds = ''
                    var that = this
                    if (arr.length != 0) {
                        arr.forEach(item => {
                            that.selectTiProIds += item.comExperId + ','
                        })
                    }
                },
                onRefresh() {

                    this.getComList()
                    this.getProductList()
                },
                submitProPrice() {
                    console.log(this.editPro);
                    if (this.priceForm.newPrice == '') {
                        this.$message.warning('请输入新的价格')
                        return
                    }
                    if (this.priceForm.newPrice == this.editPro.supplyPrice) {
                        this.$message.warning('新的价格不能与当前价格相同')
                        return
                    }
                    console.log(this.editPro);
                    console.log(this.priceForm);

                    var that = this;
                    this.mask = true
                    ajax({
                        url: newUrl + "qual/editQualComEcper",
                        type: 'post',
                        data: {
                            comExperId: that.editPro.comExperId,
                            supplyPrice: that.editPro.supplyPrice,
                            newPrice: that.priceForm.newPrice,
                            qualId: that.editPro.qualId,
                            note: 1
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            if (res.flag) {
                                that.$message.success('提交成功')
                                that.mask = false
                                that.showPrice = false
                                that.editPro.newPrice = that.newPrice
                                that.getProductList()
                                that.newPrice = ''
                            } else {
                                that.$message.warning('提交失败')
                            }
                        },
                    })
                },

                // 修改产品价格
                editHandle(obj) {
                    this.editPro = obj
                    this.newPrice = obj.supplyPrice
                    this.showPrice = true

                },

                // 获取该记录的公司列表
                getComList() {
                    var that = this;
                    this.mask = true
                    ajax({
                        url: newUrl + "qual/getQualCompanyListByRecordId",
                        type: 'post',
                        data: {
                            recordId: that.recordId
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            that.mask = false
                            that.isLoading = false
                            if (res.flag) {
                                // qualFile
                                that.comList = res.data
                                console.log(that.comList);
                            }
                        },
                    })
                },
                // 返回
                onClickLeft() {
                    window.parent.postMessage('', '*')
                    this.$forceUpdate()
                },

                // 体验表单提交
                onSubmit() {

                    if (this.tiYanForm.type == '') {
                        this.$message.warning('请选择体验方式')
                        return
                    }
                    if (this.tiYanForm.type == 1 && this.tiYanForm.note == '') {
                        this.$message.warning('请输入物流单号')
                        return
                    }

                    console.log(this.tiYanForm);
                    var that = this;
                    this.mask = true
                    ajax({
                        url: newUrl + "qual/editQualComEcperCou",
                        type: 'post',
                        data: {
                            ids: that.tiYanForm.ids,
                            transmitMode: that.tiYanForm.type,
                            courierNumbers: that.tiYanForm.note,
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            if (res.flag) {
                                that.$message.success('提交成功')
                                that.mask = false
                                that.getProductList()
                                that.showTiyan = false
                                that.tiYanForm = {
                                    type: '',
                                    note: '',
                                    ids: ''
                                }

                            } else {
                                that.$message.warning('提交失败')
                            }
                        },
                    })
                    console.log(this.tiYanForm);
                },

                // 勾选要体验的商品
                selectPro(index) {
                    console.log(index);

                    if (this.tiProList[index].transmitMode != null) {
                        return
                    }
                    this.tiProList[index].isCheck = !this.tiProList[index].isCheck
                    this.checkAll = this.tiProList.every(item => {
                        return item.isCheck
                    })
                    this.$forceUpdate()
                },

                // 全选 体验产品
                checkAllHandle() {
                    var that = this;
                    console.log(this.checkAll);
                    this.tiProList.forEach(item => {
                        if (item.transmitMode != null) {
                            return
                        }
                        item.isCheck = that.checkAll
                    })
                    this.$forceUpdate()

                },

                // 保存产品对比价格
                savePrice(obj) {
                    console.log(obj);
                    // return
                    if (obj.supplyPrice == '') {
                        that.$message.warning('请输入供货价')
                        return
                    }
                    var that = this;
                    this.mask = true
                    ajax({
                        url: newUrl + "qual/editQualComEcper",
                        type: 'post',
                        data: {
                            comExperId: obj.comExperId,
                            supplyPrice: obj.supplyPrice,
                            note: 1,
                            newPrice: obj.supplyPrice,
                            // bottomPrice: obj.bottomPrice,
                            qualId: obj.qualId
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            if (res.flag) {
                                that.$message.success('提交成功')
                                that.mask = false
                                that.getProductList()
                            } else {
                                that.$message.warning('提交失败')
                            }
                        },
                    })
                },

                // 跳转到 公司资质维护页
                uploadHandle() {
                    // window.location.href = './infoList.html'
                    // window.pageUrl = './infoList.html'
                    window.parent.postMessage('./infoList.html', '*')

                    console.log(window);
                    this.$forceUpdate()
                },


                // 输入价格 
                inputHandle(index) {
                    console.log(this.proList[index]);
                    console.log(index);
                    console.log(this.proList);
                    // if (this.proList[index].isFirst) {
                    //     this.proList[index].newPrice = this.proList[index].supplyPrice
                    // }
                    if (this.proList[index].supplyPrice != '' && this.proList[index].lowPrice != '') {

                        this.proList[index].JDPercent = (this.proList[index].bottomJd - this.proList[index].supplyPrice) / this.proList[index].supplyPrice * 100
                        this.proList[index].PDDPercent = (this.proList[index].bottomPdd - this.proList[index].supplyPrice) / this.proList[index].supplyPrice * 100
                        this.proList[index].TBPercent = (this.proList[index].bottomPrice - this.proList[index].supplyPrice) / this.proList[index].supplyPrice * 100
                        this.proList[index].LowPercent = (this.proList[index].lowPrice - this.proList[index].supplyPrice) / this.proList[index].supplyPrice * 100

                        this.proList[index].isCooperate = Number(this.proList[index].supplyPrice) < Number(this.proList[index].lowPrice)
                    }
                },
                // 点击步骤条
                clickStep(index) {
                    console.log(index);
                    this.active = index
                    this.$forceUpdate()

                },


                getProductList() {
                    var that = this, list = [];
                    this.mask = true;
                    ajax({
                        url: newUrl + "qual/getQualComEcper",
                        type: 'post',
                        data: {
                            recordId: that.recordId
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            that.isLoading = false
                            if (res.flag) {
                                console.log(res.data);
                                list = res.data.sort((a, b) => {
                                    return b.comExperId - a.comExperId
                                })
                                ajax({
                                    url: newUrl + "qual/getQualMaterialListByRecordId",
                                    type: 'post',
                                    data: {
                                        recordId: that.recordId
                                    },
                                    dataType: 'json',
                                    timeout: 10000,
                                    contentType: "application/json",
                                    success: function (res) {
                                        var res = JSON.parse(res)
                                        console.log(res);
                                        if (res.flag) {
                                            console.log(res.data);
                                            console.log(list);
                                            res.data = res.data.filter(item => {
                                                return item.status == 1
                                            })

                                            list.forEach(item => {
                                                item.isFirst = !item.supplyPrice
                                                res.data.forEach(ele => {
                                                    if (ele.qualId == item.qualId) {
                                                        item.isCooperate = ''
                                                        item.qualProductName = ele.qualProductName
                                                    }
                                                })
                                            })


                                            that.proList = list.filter(item => {
                                                return item.qualProductName
                                            })

                                            console.log(that.proList);

                                            var arr = [];
                                            that.proList.forEach(item => {
                                                if (arr.length == 0) {
                                                    arr.push(item)
                                                } else {
                                                    if (!arr.some(ele => {
                                                        return ele.qualProductName == item.qualProductName
                                                    })) {
                                                        console.log(arr);
                                                        console.log(item);
                                                        arr.push(item)
                                                    }
                                                }
                                            })
                                            console.log(arr);
                                            that.proList = arr




                                            that.tiProList = that.proList.filter(item => {


                                                if (item.bottomPdd == null && item.bottomJd == null && item.bottomPrice == null) {
                                                    item.lowPrice = 0
                                                } else {
                                                    item.lowPrice = Math.min(item.bottomPdd || 99999, item.bottomJd || 99999, item.bottomPrice || 99999)
                                                }
                                                item.JDPercent = (item.bottomJd - item.supplyPrice) / item.supplyPrice * 100
                                                item.PDDPercent = (item.bottomPdd - item.supplyPrice) / item.supplyPrice * 100
                                                item.TBPercent = (item.bottomPrice - item.supplyPrice) / item.supplyPrice * 100
                                                item.LowPercent = (item.lowPrice - item.supplyPrice) / item.supplyPrice * 100

                                                if (item.supplyPrice) {
                                                    item.isCooperate = item.lowPrice > item.supplyPrice
                                                }

                                                console.log(item);

                                                item.isCheck = false
                                                return item.lowPrice > item.supplyPrice
                                            })
                                            that.mask = false
                                        }
                                    },
                                })

                            }
                        },
                    })




                },

                saveHandle() {

                    //体验产品
                    if (this.selectTiProIds == '') {
                        this.$message.warning('请选择体验产品');
                        return
                    }
                    this.tiYanForm.ids = this.selectTiProIds
                    this.showTiyan = true
                    console.log(this.tiProList);
                    console.log(this.tiYanForm);

                },
            }
        })



    </script>

</body>

</html>